<template>
  <div style="display: flex; min-height: 100vh;">
    <!-- 左侧菜单栏 -->
    <div :style="{width: isCollapse ? '64px' : '220px', transition: 'width 0.3s'}">
      <el-menu
          background-color="#696969"
          style="width:100%;height:100vh;"
          text-color="#E0E0E0"
          active-text-color="#FFFFFF"
          :collapse="isCollapse"
          unique-opened
          router
          :collapse-transition="false"
      >
        <!-- 左侧菜单栏顶部 -->
        <div style="padding: 15px 0; text-align: center; border-bottom: 1px solid #5A5A5A;">
          <el-avatar size="50" src="" />
          <div v-if="!isCollapse" style="color: #F5F5F5; font-size: 16px; font-weight: 500;">
            健身房管理系统
          </div>
        </div>

        <el-menu-item index="/staff/index" style="font-size: 15px;margin-top: 20px">
          <template #title>
            <el-icon style="font-size: 20px; color: #E0E0E0"><House /></el-icon>
            <span style="margin-left: 8px">首页</span>
          </template>
        </el-menu-item>
        <!-- 菜单项 -->
        <el-sub-menu index="1">
          <template #title>
            <el-icon style="font-size: 20px; color: #E0E0E0"><User/></el-icon>
            <span style="font-size: 15px; margin-left: 8px;">会员管理</span>
          </template>
          <el-menu-item index="/staff/user" style="font-size: 14px;">
            <template #title>
              <span>会员信息</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/staff/user/add" style="font-size: 14px;">
            <template #title>
              <span>添加会员</span>
            </template>
          </el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="2">
          <template #title>
            <el-icon style="font-size: 20px; color: #E0E0E0"><Basketball /></el-icon>
            <span style="font-size: 15px; margin-left: 8px;">器械管理</span>
          </template>
          <el-menu-item index="/staff/equipment" style="font-size: 14px;">
            <template #title>
              <span>查看器械&修改器械状态</span>
            </template>
          </el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="3">
          <template #title>
            <el-icon style="font-size: 20px; color: #E0E0E0"><Flag /></el-icon>
            <span style="font-size: 15px; margin-left: 8px;">维修管理</span>
          </template>
          <el-menu-item index="/staff/repair" style="font-size: 14px;">
            <template #title>
              <span>查看维修表&新增维修记录</span>
            </template>
          </el-menu-item>
        </el-sub-menu>
      </el-menu>
    </div>

    <!-- 右侧内容区 -->
    <div :style="{width: isCollapse ? 'calc(100% - 64px)' : 'calc(100% - 220px)', transition: 'width 0.3s'}">
      <!-- 顶部导航栏 -->
      <el-header style="height: 60px; background-color:#5A5A5A; color: #FFFFFF; display: flex; align-items: center; padding: 0 20px;">
        <div style="display: flex; align-items: center; width: 100%;">
          <el-icon
              style="font-size: 22px; cursor: pointer; margin-right: 20px; color: #FFFFFF;"
              @click="changeCollapsed"
          >
            <Expand />
          </el-icon>

          <div style="flex-grow: 1;">
            <el-breadcrumb separator="/" style="font-size: 14px;">
              <el-breadcrumb-item v-for="item in breadcrumb">
                <span style="color: #FFFFFF;">{{ item }}</span>
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>

          <div style="display: flex; align-items: center;">

            <el-dropdown trigger="click">
              <div style="display: flex; align-items: center; cursor: pointer;">
                <el-avatar style="margin-gleft: 2px;margin-right: 4px" src="https://tse1-mm.cn.bing.net/th/id/OIP-C.H0Ar3jRKXUGv41IR03YtHAHaHa?w=195&h=196&c=7&r=0&o=5&dpr=2.2&pid=1.7" />
                <span style="font-size: 15px; margin-right: 8px; color: #FFFFFF;">{{ user.username }}</span>
                <el-icon style="font-size: 16px; color: #FFFFFF;"><arrow-down/></el-icon>
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item
                      @click="logout"
                      style="font-size: 14px;"
                  >
                    退出登录
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </el-header>

      <!-- 主内容区 -->
      <el-main style="height: calc(100vh - 60px); padding: 0; overflow-y: auto; background-color: #F5F5F5;">
        <div style="height: 50px; padding: 0 20px; background-color: #FFFFFF; box-shadow: 0 1px 4px rgba(0,0,0,0.1); display: flex; align-items: center;">
          <span style="font-size: 18px; color: #333333; font-weight: 500;">员工功能</span>
        </div>

        <div style="padding: 20px;">
          <router-view />
        </div>
      </el-main>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import {
  User, UserFilled, Expand, ArrowDown, Basketball, Flag, House
} from '@element-plus/icons-vue';
import {ElMessage} from "element-plus";
const checkAuth = ()=>{
  const role = localStorage.getItem('role');
  if(role===null){
    ElMessage.error('未登录，请重新登录');
    router.push('/login');
    return;
  }
  if(role!=='普通员工'){
    ElMessage.error('权限不足，请重新登录');
    router.push('/login');
  }
}



// 菜单折叠控制
const isCollapse = ref(false);
const changeCollapsed = () => {
  isCollapse.value = !isCollapse.value;
}

// 用户信息
const user = ref({
  username: localStorage.getItem('ename'),
});

const logout = ()=>{
  if(confirm('您确认要退出登录吗?')){
    localStorage.removeItem('user');
    window.location.href = '/login';
    user.value = '';

    localStorage.removeItem('role');
    localStorage.removeItem('eid');
  }
}

// 面包屑导航
const breadcrumb = ref(['员工功能']);
let map = {
  '/staff/index': ['首页'],
  '/staff/user': ['首页','会员管理','会员列表'],
  '/staff/user/add': ['首页','会员管理','添加会员'],
  '/staff/equipment': ['首页','器械管理', '查看器械&修改器械状态'],
  '/staff/repair': ['首页','器械管理', '查看维修表&新增维修记录'],
};

onMounted(() => {
  updateBreadcrumb(route);
});

const route = useRoute();

// 更新面包屑导航
const updateBreadcrumb = (route)=>{
  //从当前路由对象中获取到当前的path
  const path = route.path;
  breadcrumb.value = map[path];
}

//获取路由守卫,监听路由,只要path发生了改变(包括点左侧菜单栏),就立即更新面包屑的值,再进行跳转
const router = useRouter();
router.beforeEach((to,from,next)=>{
  updateBreadcrumb(to);
  next();
})

checkAuth();

</script>

<style scoped>
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #F5F5F5;
}

::-webkit-scrollbar-thumb {
  background: #C1C1C1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #A8A8A8;
}

/* 菜单项悬停效果 */
.el-menu-item:hover {
  background-color: #5A5A5A !important;
}

.el-sub-menu__title:hover {
  background-color: #5A5A5A !important;
}

/* 下拉菜单样式 */
.el-dropdown-menu {
  border: none;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}

.el-dropdown-menu__item {
  font-size: 14px;
  color: #606266;
}

.el-dropdown-menu__item:hover {
  background-color: #F5F7FA;
  color: #409EFF;
}

/* 面包屑样式 */
.el-breadcrumb__inner {
  font-weight: normal;
}

.el-breadcrumb__item:last-child .el-breadcrumb__inner {
  font-weight: 500;
  color: #FFFFFF;
}
</style>